<template>
    <div id="page">
        <!-- 顶部 -->
        <div id="header_top">
            <p class="iconfont">&#xe6bc;</p>
            <p>溪牧原山茶花洁面...</p>
            <p>
                <span class="iconfont">&#xf0112;
                </span>
                <span class="iconfont">&#xe71e;</span>
                <i></i>
            </p>
        </div>

        <!-- 导航 -->
        <nav>
            <ul>
                <li><a href="#" class="cur">
                        <i></i>
                        商品
                    </a></li>
                <li><a href="#">评价</a></li>
                <li><a href="#">详情</a></li>
                <li><a href="#">推荐</a></li>
            </ul>
        </nav>


        <!-- 内容 -->
        <main>
            <!-- 海报 -->
            <div id="banner">
                <img :src="$pre+obj.img" alt="">
                <p>8/8</p>
                <span class="iconfont">&#xe71e;
                </span>
            </div>

            <!-- 价格 -->
            <div id="price">
                <p>
                    <i>￥</i>
                    <em>{{obj.price}}</em>

                    <del>￥{{obj.market_price}}</del>
                    <span class="last">
                        <span class="iconfont">&#xe60f;</span>
                        <span>收藏</span>
                    </span>
                </p>
                <p>{{obj.goodsname}}</p>
                <p>敏感肌可用，控油祛痘，男女可用、泡沫绵密、净透毛孔</p>
                <p>11.11限时299元起</p>
                <p>
                    <span>此商品于2020-11-11,00点结束闪购特卖</span>
                    <span class="iconfont">查看&#xe601;</span>
                </p>
            </div>

            <!-- 领劵 -->
            <div id="con">
                <p>
                    <span>领劵</span>
                    <img src="../../assets/images/price_03.jpg" alt="">
                    <img src="../../assets/images/price_05.jpg" alt="">
                    <img src="../../assets/images/price_07.jpg" alt="">
                    <i></i>
                </p>
                <p>
                    <span>分期</span>
                    <span>可选3/6/12期</span>
                    <span class="iconfont">&#xe601;</span>
                </p>
            </div>
        </main>

        <!-- 尾部 -->
        <footer>
            <!-- 上 -->
            <div class="top">
                <div class="left">
                    <p>
                        <span class="iconfont">&#xe62d;</span>
                        <span>客服</span>
                    </p>
                    <p>
                        <span class="iconfont">&#xe663;</span>
                        <span>店铺</span>
                    </p>
                    <p>
                        <span class="iconfont">&#xe612;</span>
                        <span>购物车</span>
                    </p>
                </div>
                <div class="right">
                    <p @click="cart(obj.id)">
                        加入购物车
                    </p>
                    <p>
                        立即购买
                    </p>
                </div>

            </div>

            <!-- 下 -->
            <div class="bottom">
                <p></p>
            </div>
        </footer>

    </div>
</template>

<script>
import {goodsinfo,cartadd} from '../../utils/api'
import {mapGetters} from 'vuex'
export default {
    data(){
        return{
            obj:{}
        }
    },
    computed:{
        ...mapGetters({
            userlist:'user'
        })
    },
    mounted() {
        goodsinfo({id:this.$route.query.id}).then(res=>{
            // console.log(res);
            if(res.data.code==200){
                this.obj=res.data.list[0]
            }
            console.log(this.obj);
        })
        console.log(this.userlist);        
    },
    methods:{
        // 点击添加购物车
        cart(id){
            cartadd({uid:this.userlist.uid,goodsid:id,num:1,authorization:this.userlist.token}).then(res=>{
                if(res.data.code==200){
                    this.$router.push('/index/shop?id='+id)
                }else{
                    alert(res.data.msg)
                }
            })
            
        }
    }
}
</script>

<style scoped src='../../assets/css/details.css'>

</style>